<template>
	<div class="m-t-20 " style="margin-bottom: 100px;">
		<div class="title">
			<h2 v-cloak>{{hotList.title}}</h2>
			<p class="m-b-8" v-cloak>{{hotList.desc}}</p>
		</div>
		
		<swiper ref="mySwiper" :options="swiperOptions">
			<swiper-slide class="swiper-slide" v-for="item in hotList.list" :key="item.goods_id">
				<img :goods-id="item.goods_id" :src="item.goods_thumb" class="b-r-8" />
				<p :goods-id="item.goods_id" v-cloak class="p-l-r-8 m-t-8">{{item.goods_name}}</p>
				<p :goods-id="item.goods_id" v-cloak class="p-l-r-8 m-t-8">￥{{item.price}}</p>
			</swiper-slide>
		</swiper>
		
	</div>
</template>

<script>
	// 定义一个变量
	let vm = null;
	
	export default{
		props : ['hotList'],
		created() {
			vm = this;
		},
		data(){
			return{
				swiperOptions : {
					freeMode : true,
					slidesPerView :'auto',
					spaceBetween : 8,
					on : {
						// 接收两个参数
						tap(swiper, event){
							// 拿到当前点击得到的goods_id跳转到当前详情
							let goodsId = event.target.attributes['goods-id'] && event.target.attributes['goods-id'].value;
							if(goodsId){
								vm.$router.push({path:'details', query:{'goods_id' : goodsId}})
							};
						}
					}
				},	
			}
		},	
	}
</script>

<style scoped lang="less">
	.title{
		
		h2{
			font-size: 22px;
			margin: 10px 0px
		}
		p{
			font-size: 14px;
			color:#999999;
		}
	}
	.swiper-slide{
		width:40%;
		font-size: 13px;
		img{
			width:100%;
		}
		p{
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		p:last-child{
			color: #07c160;
			font-size: 16px;
		}
	}
</style>
